import React, { useEffect } from 'react'
import { Switch, Route ,Redirect,HashRouter} from 'react-router-dom'

import { routeArrange } from './config'
const routers =routeArrange()

const RouterComponent = () => {
  useEffect(() => {
    console.log(routers)
  }, [])
  return (
  <React.Suspense fallback={'loding'}>
    <Switch>
    {routers.map((route,index)=>( !route.redirect ? (
                <Route key={index} path={route.path} exact={false} component={route.component} />
              ) : (
                <Redirect key={index} from={route.path} to={route.redirect} />
              )
    ))}
    </Switch>
  </React.Suspense>)
}

const  withRoute= ()=>{


  return (
    <HashRouter basename="/react">
      <RouterComponent />
    </HashRouter>
  )
}

export default (withRoute)